Flutter এ Custom Input Widgets তৈরি করা

Flutter-এ Custom Input Widgets তৈরি করা একটি শক্তিশালী এবং ফ্লেক্সিবল পদ্ধতি, যা আপনাকে একটি ইউনিক এবং কাস্টমাইজড ইনপুট অভিজ্ঞতা তৈরি করতে সাহায্য করে। Custom Input Widgets তৈরি করার মাধ্যমে আপনি অ্যাপের থিম বা ব্র্যান্ডিংয়ের সাথে মিলিয়ে ইনপুট ফিল্ড ডিজাইন করতে পারেন এবং প্রয়োজনমতো এর ফাংশনালিটি বাড়াতে পারেন।

Custom Input Widgets তৈরি করার ধাপ

Flutter-এ Custom Input Widgets তৈরি করতে, সাধারণত আমরা TextFormField বা TextField উইজেটকে কাস্টমাইজ করে নতুন উইজেট তৈরি করি। নিচে Custom Input Widget তৈরির উদাহরণ এবং কৌশল নিয়ে আলোচনা করা হলো:

উদাহরণ: একটি Custom Input Widget তৈরি করা

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Input Widget Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              CustomInputField(
                labelText: 'Username',
                icon: Icons.person,
              ),
              SizedBox(height: 20),
              CustomInputField(
                labelText: 'Password',
                icon: Icons.lock,
                obscureText: true,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// Custom Input Field Widget
class CustomInputField extends StatelessWidget {
  final String labelText;
  final IconData icon;
  final bool obscureText;

  const CustomInputField({
    required this.labelText,
    required this.icon,
    this.obscureText = false,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: labelText,
        prefixIcon: Icon(icon),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        filled: true,
        fillColor: Colors.grey[200],
      ),
    );
  }
}

কোডের ব্যাখ্যা

1. CustomInputField: এটি একটি StatelessWidget যা একটি কাস্টম ইনপুট ফিল্ড তৈরি করে।
   • labelText: ইনপুট ফিল্ডের লেবেল হিসেবে প্রদর্শিত হবে।
   • icon: ইনপুট ফিল্ডের পাশে একটি আইকন প্রদর্শিত হবে।
   • obscureText: পাসওয়ার্ড ইনপুটের জন্য ফিল্ডকে হাইড করা যাবে।
2. TextFormField:
   • decoration: InputDecoration ব্যবহার করে ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা হয়েছে।
   • prefixIcon: ইনপুট ফিল্ডের সামনে একটি আইকন যোগ করা হয়েছে।
   • border: বর্ডার রেডিয়াস এবং বর্ডার স্টাইল সেট করা হয়েছে, যা ইনপুট ফিল্ডকে রাউন্ডেড এজ দেয়।
   • fillColor: ইনপুট ফিল্ডের ব্যাকগ্রাউন্ড কালার দেওয়া হয়েছে, যা ফিল্ডের স্টাইল আরও উন্নত করে।

Custom Input Widgets-এর অন্যান্য কাস্টমাইজেশন

Flutter-এ Custom Input Widgets তৈরি করার সময় আপনি বিভিন্ন প্রপার্টি ব্যবহার করে উইজেটকে আরও কাস্টমাইজ করতে পারেন। নিচে কিছু কাস্টমাইজেশন নিয়ে আলোচনা করা হলো:

১. বর্ডার স্টাইল কাস্টমাইজ করা

InputDecoration(
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.blue, width: 2.0),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.green, width: 2.0),
  ),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

• enabledBorder: যখন ইনপুট ফিল্ড সক্রিয় (ফোকাসে নেই) থাকে তখন বর্ডার কেমন হবে।
• focusedBorder: ইনপুট ফিল্ড ফোকাসে গেলে বর্ডার কেমন হবে।

২. প্যাডিং এবং মার্জিন কাস্টমাইজ করা

InputDecoration(
  contentPadding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),
)

• contentPadding: ইনপুট ফিল্ডের ভেতরের টেক্সট এবং অন্যান্য উপাদানের চারপাশে প্যাডিং যোগ করতে ব্যবহৃত হয়।

৩. হিন্ট এবং লেবেল কাস্টমাইজ করা

InputDecoration(
  labelText: 'Email',
  hintText: 'Enter your email',
  labelStyle: TextStyle(color: Colors.blue, fontSize: 16.0),
  hintStyle: TextStyle(color: Colors.grey),
)

• labelText: ইনপুট ফিল্ডের লেবেল হিসেবে কাজ করে।
• hintText: ইনপুট ফিল্ডের ভেতরে টেক্সট দেখায়, যা ইনপুটের প্রয়োজনীয়তা ব্যাখ্যা করে।
• labelStyle এবং hintStyle: লেবেল এবং হিন্ট টেক্সটের স্টাইল কাস্টমাইজ করা যায়।

৪. Error এবং Helper Text কাস্টমাইজ করা

InputDecoration(
  errorText: 'This field cannot be empty',
  helperText: 'Please enter your username',
  errorStyle: TextStyle(color: Colors.red, fontSize: 12.0),
)

• errorText: ইনপুট ভুল হলে একটি এরর মেসেজ দেখানো হয়।
• helperText: ইনপুট ফিল্ডের নিচে সহায়ক টেক্সট দেখানোর জন্য ব্যবহৃত হয়।
• errorStyle: এরর টেক্সটের স্টাইল কাস্টমাইজ করা যায়।

৫. কাস্টম কন্ট্রোলার এবং ফাংশনালিটি যুক্ত করা

Flutter-এ আপনি কাস্টম ইনপুট উইজেটে TextEditingController এবং অন্যান্য কাস্টম ফাংশন যুক্ত করতে পারেন, যা ইনপুট ফিল্ডের ডেটা হ্যান্ডেল করতে সাহায্য করে।

class CustomInputField extends StatelessWidget {
  final String labelText;
  final IconData icon;
  final bool obscureText;
  final TextEditingController controller;

  const CustomInputField({
    required this.labelText,
    required this.icon,
    this.obscureText = false,
    required this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: labelText,
        prefixIcon: Icon(icon),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        filled: true,
        fillColor: Colors.grey[200],
      ),
    );
  }
}

উদাহরণ: কাস্টম কন্ট্রোলার ব্যবহার করে

final TextEditingController usernameController = TextEditingController();

CustomInputField(
  labelText: 'Username',
  icon: Icons.person,
  controller: usernameController,
)

• controller ব্যবহার করে ইনপুট ফিল্ডের ভ্যালু সংগ্রহ করা এবং ম্যানেজ করা যায়।

৬. Custom Input Widget-এর সুবিধা

• পুনঃব্যবহারযোগ্যতা: একবার একটি Custom Input Widget তৈরি করলে আপনি বিভিন্ন স্ক্রিন বা স্থানে সেটি পুনঃব্যবহার করতে পারবেন।
• কোড ম্যানেজমেন্ট: কোড কাস্টমাইজ করার সময় এবং ফাংশনালিটি যোগ করার ক্ষেত্রে এটি কোডকে সংগঠিত এবং পরিষ্কার রাখে।
• ডিজাইন এবং ব্র্যান্ডিং: অ্যাপ্লিকেশনের থিম এবং ব্র্যান্ডিং অনুযায়ী কাস্টম ইনপুট উইজেট তৈরি করা যায়।

Custom Input Widgets তৈরির টিপস

1. মাল্টিপারামিটার ব্যবহার করুন: ইনপুট উইজেটের স্টাইল এবং ফাংশনালিটি পরিবর্তন করতে বিভিন্ন প্যারামিটার যোগ করুন।
2. Global Key ব্যবহার করুন: ইনপুট ফিল্ডের ভ্যালিডেশন বা সাবমিশনের জন্য GlobalKey<FormState> ব্যবহার করে ফর্ম কন্ট্রোল করুন।
3. Custom Validation ফাংশন: Custom Input Widgets-এর জন্য কাস্টম ভ্যালিডেশন ফাংশন যুক্ত করে ইনপুট যাচাই করুন।

এভাবে, Flutter-এ Custom Input Widgets তৈরি করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ডাইনামিক, ইউনিক, এবং ব্যবহারের সহজ করে তুলতে পারেন।